<template>
  <crud
    :entity-name="entityName"
    :dialog-enity.sync="entity"
    :request-param="pagerequest"
    :keyword-placeholder="keywordPlaceholder"
    :dialog-optins="dialogOptins"
    @dialogFormClearValidate="handleFormClearValidate"
    @dialogFormValidate="handleFormValidate"
  >
    <template slot="FilterItems">
      <el-select
        v-model="activeSelected"
        :placeholder="L('Select')"
        clearable
        style="width: 90px"
        class="filter-item"
        @change="handleIsActiveChange"
      >
        <el-option
          :label="L('All')"
          value="All"
        />
        <el-option
          :label="L('Actived')"
          value="Actived"
        />
        <el-option
          :label="L('NoActive')"
          value="NoActive"
        />
      </el-select>
      <el-date-picker
        v-model="creationTime"
        class="filter-item"
        type="daterange"
        align="right"
        unlink-panels
        start-placeholder="创建开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="handleCreationTimeChange"
      />
    </template>

    <template slot="TableColumns">
      <el-table-column
        prop="name"
        :label="L('RoleName')"
      />
      <el-table-column
        prop="displayName"
        :label="L('DisplayName')"
      />
      <el-table-column
        prop="description"
        :label="L('Description')"
      />
      <el-table-column :label="L('IsStatic')">
        <template slot-scope="{row}">
          <el-tag :type="row.isStatic | booleanTagFilter">
            {{ row.IsStatic ? L('Yes') : L('No') }}
          </el-tag>
        </template>
      </el-table-column>
    </template>

    <createOrEditRole
      ref="CreateOrEditDialog"
      slot="CreateOrEditDialog"
      slot-scope="{dialogAction}"
      :dialog-action="dialogAction"
      :entity="entity"
    />
  </crud>

</template>

<script>
import crud from '@/components/CRUD'
import createOrEditRole from './components/CreateOrEditRole'
export default {
  name: 'Role',
  components: { crud, createOrEditRole },
  data() {
    return {
      entity: {},
      entityName: 'role',
      pagerequest: {},
      keywordPlaceholder: this.L('Name') + '/' + this.L('DisplayName'),
      dialogOptins: {
        width: '500px',
        createEnityParam: { permissions: [] },
        createTitle: this.L('CreateNewRole'),
        editTitle: this.L('EditRole'),
        deleteConfirm: this.L('DeleteRolesConfirm')
      },
      activeSelected: null,
      creationTime: []
    }
  },
  methods: {
    handleFormClearValidate() {
      this.$refs.CreateOrEditDialog.clearValidate()
    },
    handleFormValidate(cb) {
      this.$refs.CreateOrEditDialog.validate(cb)
    }
  }

}
</script>
